<template>
  <div id="login-main">
    <el-card class="box-card">


      <template #header>
        <div class="card-header">
          <span style="font-weight: bolder;color: #2155c2">登录系统</span>
        </div>
      </template>




      <el-tabs type="border-card" stretch="true" class="el-tabs-login">
        <el-tab-pane label="用户名登录" tab-position="right">

          <el-form :model="resetForm" status-icon :rules="resetFormRules" ref="resetForm" label-width="100px"  style="width: 300px" hide-required-asterisk="false">
            <el-form-item label="用户名" prop="username">
              <el-input type="text" v-model="resetForm.username" auto-complete="off" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" show-password v-model="resetForm.password" auto-complete="off" placeholder="请输入密码"></el-input>
            </el-form-item>
          </el-form>

          <div class="subm" >
            <el-button type="primary" plain @click="subup('resetForm')" class="loginbutton"> 登录</el-button>
          </div>
          <div>
            <router-link to="/register">没有账号？注册一个</router-link>
          </div>
          <router-link to="/recoverpassword">忘记密码？</router-link>
        </el-tab-pane>


        <el-tab-pane label="电话号登录" tab-position="left">

          <el-form :model="resetForm" status-icon :rules="resetFormRules" ref="resetForm" label-width="100px"  style="width: 300px" hide-required-asterisk="false">
            <el-form-item label="电话号" prop="username">
              <el-input type="text" v-model="resetForm.phone" auto-complete="off" placeholder="请输入电话号"></el-input>
              <el-button type="primary" plain @click="check_phone_number()" > 验证电话号并发送验证码</el-button>
            </el-form-item>
            <el-form-item label="验证码" prop="password">
              <el-input type="password" show-password v-model="inputCode" auto-complete="off" placeholder="请输入密码"></el-input>
            </el-form-item>
          </el-form>

          <div class="subm">

            <el-button type="primary" plain @click="confirmCode()" class="loginbutton">登录</el-button>
          </div>
          <div>
            <router-link to="/register">没有账号？注册一个</router-link>
          </div>

          <router-link to="/recoverpassword">忘记密码？</router-link>



        </el-tab-pane>
      </el-tabs>



    </el-card>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";

export default {
  name: "AnswererLogin",
  data(){
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码！'));
      } else {
        callback();
      }
    };
    var validateid = (rule, value, callback) => {
      if (!value) {
        //callback(new Error('请输入电话！'));
      } else {
        callback();
      }
    };
    return{
      questionnaireId:0,
      username:'',
      userPassword:'',
      resetForm: {},
      resetFormRules: {
        password: [
          { required: true, validator: validatePass,trigger: 'blur' }
        ],
        username: [
          { required: true, validator: validateid, trigger: 'blur' }
        ],
        phone: [
          { required: true, validator: validateid, trigger: 'blur' }
        ]
      },
      correctCode: '',
      inputCode: '',
      url:'',
      questionID:[]

    }
  },
  created() {
    this.load()
    localStorage.removeItem("token")
  },
  methods:{
    load(){
      this.questionnaireId = this.$route.params.id
    },
    subup(){
      this.$http.post("/user/loginAnswerer",this.resetForm).then(res=>{
        if(res.statusCode == '200'){
          localStorage.setItem("token",res.data.userToken)
          ElMessage({
            message: '登录成功！',
            type: 'success',
          })
          this.$router.push({name:'回答',params:{questionnaireId:this.questionnaireId,answererId:this.resetForm.username}})

        }else {
          ElMessage.error('登录失败！')
        }
      }).catch(()=>{
            ElMessage.error('登录失败！')
          }
      )
    },
    subup_phone(){
      this.$http.post("/user/login_phone",this.resetForm).then(res=>{
        if(res.statusCode == '200'){
          localStorage.setItem("token",res.data.userToken)
          ElMessage({
            message: '登录成功！',
            type: 'success',
          })
          this.$router.push("/")
        }else {
          ElMessage.error('登录失败！')
        }
      }).catch(()=>{
        ElMessage.error('登录失败！')
      })
    },
    check_phone_number(){
      this.$http.post("/user/check_phone_number",this.resetForm).then(res=>{
        if(res.statusCode == '200'){
          localStorage.setItem("token",res.data.userToken)
          console.log(res.data.code)
          this.correctCode=res.data
          ElMessage({
            message: '查询成功！即将发送验证码',
            type: 'success',
          })
          this.correctCode=res.data
        }else {
          ElMessage.error('查询失败！')
        }
      }).catch(()=>{
            ElMessage.error('查询失败！')
          }
      )
    },
    confirmCode(){
      console.log(this.correctCode.code)
      console.log(this.inputCode)
      if(this.correctCode.code==this.inputCode){
        this.$router.push("/")
        ElMessage({
          message: '验证成功！',
          type: 'success',
        })
      }else{
        ElMessage.error('验证失败！')
      }
    }


  }


}
</script>

<style scoped>
#login-main{
  margin-left: 0px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.box-card {
  width: 480px;
  margin-left: 500px;
}
.subm{

  margin-top: 7%;
}
.el-tabs-login{
  margin-left: 0px;
  width: auto;
}
.loginbutton{
  width: 200px;
  position: center;
  margin-left: 100px;
}

</style>
